<template>
	<view class="container">
		<view class="title">计算历史</view>
		
		<view class="record-list" v-if="records && records.length > 0">
			<view class="record-item" v-for="(item, index) in records" :key="index">
				<view>{{item.num1}} + {{item.num2}} = {{item.result}}</view>
				<view class="time">{{formatTime(item.createTime)}}</view>
			</view>
		</view>
		
		<view class="empty" v-else>暂无资料历史记录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				records: []
			}
		},
		onLoad() {
			this.loadHistory()
		}
		methods: {
			async loadHistory() {
				try {
					const res = await uniCloud.callFunction({
						name: 'getHistory'
					});
					
					if (res.result.code === 200) {
						this.records = res.result.data || [];
					}
					else {
						uni.showToast({
							title: '获取历史记录失败',
							icon: 'none'
						});
					}
				}
				catch (e) {
					console.error('获取历史记录出错',  e)
					uni.showToast({
						title: '获取历史记录出错',
						icon: 'none'
					})
				},
				formatTime(timestamp) {
					const date = new Date(timestamp);
					
					return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
				}
			}
		}
	}
</script>

<style>
.container {
    padding: 20px;
}

.title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.record-list {
    margin-bottom: 20px;
}

.record-item {
    padding: 10px;
    margin-bottom: 10px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.time {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.empty {
    text-align: center;
    padding: 20px;
    color: #999;
}
</style>
